Oznake obrazaca: Osnovni zahtjevi za pristupačnost polja za unos

Obrasci su temeljni dio weba. Od jednostavnih kontaktnih obrazaca do složenih naplata u e-trgovini, oni omogućuju korisnicima interakciju s web stranicama i aplikacijama. Međutim, loše dizajnirani obrasci mogu stvoriti značajne prepreke za korisnike s invaliditetom. Ključan element u stvaranju pristupačnih obrazaca je pravilna upotreba oznaka obrazaca. Ovaj vodič pruža sveobuhvatan pregled zahtjeva za pristupačnost oznaka obrazaca, osiguravajući da su vaši obrasci upotrebljivi za sve, bez obzira na njihove sposobnosti.

Zašto su pristupačne oznake obrazaca važne?

Pristupačne oznake obrazaca ključne su iz nekoliko razloga:

• Upotrebljivost: Jasne i sažete oznake pomažu svim korisnicima da razumiju svrhu svakog polja za unos, poboljšavajući cjelokupnu upotrebljivost.
• Pristupačnost: Oznake pružaju ključne informacije za korisnike s invaliditetom, posebno one koji se oslanjaju na pomoćne tehnologije poput čitača zaslona. Bez pravilnih oznaka, ti korisnici možda neće moći ispuniti obrasce.
• Usklađenost s WCAG-om: Smjernice za pristupačnost web sadržaja (WCAG) zahtijevaju da sve kontrole obrasca imaju pridružene oznake. Ispunjavanje ovih smjernica osigurava da je vaša web stranica pristupačna i zakonski usklađena u mnogim jurisdikcijama.
• SEO: Iako nije izravan faktor rangiranja, pristupačne web stranice obično imaju bolje korisničko iskustvo, što može neizravno poboljšati SEO performanse.

Razumijevanje WCAG zahtjeva za oznake obrazaca

WCAG pruža specifične smjernice za osiguravanje pristupačnosti obrazaca. Evo ključnih zahtjeva vezanih uz oznake obrazaca:

WCAG 2.1 Kriterij uspješnosti 1.1.1 Netekstualni sadržaj (Razina A)

Iako se ne odnosi izravno na oznake, ovaj kriterij naglašava važnost pružanja tekstualnih alternativa za sav netekstualni sadržaj, uključujući CAPTCHA-e i slike koje se koriste unutar obrazaca. Pravilno označeni obrazac ključan je za pružanje konteksta tim alternativama.

WCAG 2.1 Kriterij uspješnosti 1.3.1 Informacije i odnosi (Razina A)

Informacije, struktura i odnosi koji se prenose prezentacijom trebaju biti programski odredivi ili dostupni u tekstu. To znači da odnos između oznake i odgovarajućeg polja za unos mora biti eksplicitno definiran u HTML kodu.

WCAG 2.1 Kriterij uspješnosti 2.4.6 Naslovi i oznake (Razina AA)

Naslovi i oznake opisuju temu ili svrhu. Oznake obrazaca pružaju opisni kontekst za polja za unos, olakšavajući korisnicima razumijevanje strukture obrasca i njegovo točno ispunjavanje.

WCAG 2.1 Kriterij uspješnosti 3.3.2 Oznake ili upute (Razina A)

Oznake ili upute pružaju se kada sadržaj zahtijeva unos od strane korisnika.

WCAG 2.1 Kriterij uspješnosti 4.1.2 Naziv, uloga, vrijednost (Razina A)

Za sve komponente korisničkog sučelja (uključujući, ali ne ograničavajući se na elemente obrasca, poveznice i komponente generirane skriptama), naziv i uloga mogu se programski odrediti; stanja, svojstva i vrijednosti koje korisnik može postaviti mogu se programski postaviti; a obavijest o promjenama tih stavki dostupna je korisničkim agentima, uključujući pomoćne tehnologije.

Najbolje prakse za implementaciju pristupačnih oznaka obrazaca

Evo nekoliko najboljih praksi za stvaranje pristupačnih oznaka obrazaca:

1. Koristite element <label>

Element <label> primarni je način povezivanja tekstualne oznake s poljem za unos. Pruža semantičku i strukturnu vezu između oznake i kontrole. Atribut for elementa <label> treba odgovarati atributu id odgovarajućeg polja za unos.

Primjer:

<label for="name">Ime:</label>
<input type="text" id="name" name="name">

Neispravan primjer (izbjegavati):

<span>Ime:</span>
<input type="text" id="name" name="name">

Korištenje elementa span umjesto label ne stvara potrebnu programsku povezanost, čineći ga nepristupačnim čitačima zaslona.

2. Eksplicitno povežite oznake s poljima za unos

Osigurajte jasnu i eksplicitnu povezanost između oznake i polja za unos pomoću atributa for i id kao što je prikazano u gornjem primjeru.

3. Pravilno pozicionirajte oznake

Položaj oznaka može utjecati na upotrebljivost. Općenito, oznake bi trebale biti postavljene:

• Iznad polja za unos: Ovo je često najpristupačnija i najjednostavnija opcija za korisnike, posebno za tekstualna polja i tekstualna područja.
• Lijevo od polja za unos: Uobičajeno, ali može biti manje učinkovito za korisnike s oštećenjem vida koji mogu imati poteškoća s pregledavanjem stranice.
• Za radio gumbe i potvrdne okvire: Oznake bi trebale biti postavljene desno od kontrole.

Razmotrite kulturne norme prilikom pozicioniranja oznaka. U nekim jezicima, oznake se tradicionalno postavljaju nakon polja za unos. Prilagodite svoj dizajn kako biste udovoljili tim preferencijama.

4. Pružite jasne i sažete oznake

Oznake bi trebale biti kratke, opisne i lake za razumijevanje. Izbjegavajte žargon ili tehničke izraze koji mogu zbuniti korisnike. Na primjer, umjesto "UserID", koristite "Korisničko ime" ili "E-mail adresa". Razmislite o lokalizaciji. Osigurajte da se vaše oznake lako prevode na različite jezike zadržavajući svoje značenje.

5. Koristite ARIA atribute kada je potrebno

ARIA (Accessible Rich Internet Applications) atributi mogu poboljšati pristupačnost elemenata obrasca, posebno u složenim scenarijima. Međutim, koristite ARIA razborito i samo kada su nativni HTML elementi i atributi nedovoljni.

• aria-label: Koristite ovaj atribut za pružanje oznake kada vidljiva oznaka nije moguća ili praktična.
• aria-labelledby: Koristite ovaj atribut za referenciranje ID-a postojećeg elementa na stranici koji će služiti kao oznaka.
• aria-describedby: Koristite ovaj atribut za pružanje dodatnih informacija ili uputa za polje za unos. Ovo je korisno za pružanje konteksta ili objašnjavanje pravila validacije.

Primjer korištenja aria-label:

<input type="search" aria-label="Pretraži web stranicu">

Primjer korištenja aria-labelledby:

<h2 id="newsletter-title">Pretplata na newsletter</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Unesite svoju e-mail adresu">

6. Grupirajte povezane elemente obrasca s <fieldset> i <legend>

Element <fieldset> grupira povezane kontrole obrasca, a element <legend> pruža naslov za fieldset. To poboljšava strukturu obrasca i olakšava korisnicima razumijevanje odnosa između različitih polja za unos.

Primjer:

<fieldset>
  <legend>Kontakt informacije</legend>
  <label for="name">Ime:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Pružite jasne poruke o pogreškama

Kada korisnici naprave pogreške prilikom ispunjavanja obrasca, pružite jasne i informativne poruke o pogreškama koje objašnjavaju što je pošlo po zlu i kako ispraviti pogrešku. Povežite te poruke o pogreškama s odgovarajućim poljima za unos pomoću ARIA atributa poput aria-describedby.

Primjer:

<label for="email">Email:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Molimo unesite valjanu e-mail adresu.</span>

Osigurajte da je poruka o pogrešci vizualno prepoznatljiva (npr. pomoću boje ili ikona) i programski dostupna pomoćnim tehnologijama.

8. Koristite dovoljan kontrast boja

Osigurajte dovoljan kontrast boja između teksta oznake i boje pozadine kako biste ispunili WCAG zahtjeve. Koristite alat za analizu kontrasta boja kako biste provjerili zadovoljava li omjer kontrasta minimalne zahtjeve (4.5:1 za normalan tekst i 3:1 za veliki tekst). To pomaže korisnicima sa slabim vidom da lakše čitaju oznake.

9. Osigurajte pristupačnost tipkovnicom

Svi elementi obrasca trebaju biti dostupni samo pomoću tipkovnice. Korisnici bi trebali moći navigirati kroz obrazac pomoću tipke Tab i interagirati s kontrolama obrasca pomoću razmaknice ili tipke Enter. Temeljito testirajte svoje obrasce tipkovnicom kako biste osigurali pravilnu pristupačnost tipkovnicom.

10. Testirajte pomoću pomoćnih tehnologija

Najbolji način da osigurate pristupačnost svojih obrazaca je da ih testirate pomoću pomoćnih tehnologija poput čitača zaslona (npr. NVDA, JAWS, VoiceOver). To će vam pomoći identificirati probleme s pristupačnošću koji možda nisu očiti tijekom vizualnog pregleda. Uključite korisnike s invaliditetom u svoj proces testiranja kako biste dobili vrijedne povratne informacije.

Primjeri implementacije pristupačnih oznaka obrazaca

Primjer 1: Jednostavan kontakt obrazac (međunarodna perspektiva)

Razmotrite kontakt obrazac za globalnu publiku. Oznake bi trebale biti jasne, sažete i lako prevodive.

<form>
  <label for="name">Puno ime:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">E-mail adresa:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Država:</label>
  <select id="country" name="country">
    <option value="">Odaberite državu</option>
    <option value="us">Sjedinjene Američke Države</option>
    <option value="ca">Kanada</option>
    <option value="uk">Ujedinjeno Kraljevstvo</option>
    <option value="de">Njemačka</option>
    <option value="fr">Francuska</option>
    <option value="jp">Japan</option>
    <option value="au">Australija</option>
    <!-- Dodajte još država -->
  </select><br><br>

  <label for="message">Poruka:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Pošalji">
</form>

Primijetite upotrebu "Puno ime" umjesto samo "Ime" radi jasnoće, posebno za kulture gdje prezimena prethode imenima.

Primjer 2: Obrazac za naplatu u e-trgovini

Obrasci za naplatu u e-trgovini često zahtijevaju osjetljive informacije. Jasne oznake i upute ključne su za izgradnju povjerenja i osiguravanje pristupačnosti.

<form>
  <fieldset>
    <legend>Adresa za dostavu</legend>
    <label for="shipping_name">Puno ime:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Adresa:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Grad:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Poštanski broj:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Država:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Odaberite državu</option>
      <option value="us">Sjedinjene Američke Države</option>
      <option value="ca">Kanada</option>
      <!-- Dodajte još država -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Informacije o plaćanju</legend>
    <label for="card_number">Broj kreditne kartice:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Datum isteka (MM/GG):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/GG"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Naruči">
</form>

Upotreba fieldseta i legenda jasno organizira obrazac u logičke odjeljke. Tekst rezerviranog mjesta (placeholder) pruža dodatne upute, ali zapamtite da se tekst rezerviranog mjesta ne smije koristiti kao zamjena za oznake.

Primjer 3: Obrazac za registraciju s ARIA atributima

Razmotrite obrazac za registraciju gdje je nadimak neobavezan. Koristeći ARIA atribute, možemo pružiti dodatni kontekst.

<form>
  <label for="username">Korisničko ime:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Lozinka:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Nadimak (neobavezno):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Ovaj nadimak bit će javno prikazan.</span><br><br>

  <input type="submit" value="Registriraj se">
</form>

Atribut aria-describedby povezuje polje za unos nadimka s elementom span koji pruža dodatne informacije o tome kako će se nadimak koristiti.

Alati za testiranje pristupačnosti obrazaca

Nekoliko alata vam može pomoći u procjeni pristupačnosti vaših obrazaca:

• Accessibility Insights: Proširenje za preglednik koje identificira probleme s pristupačnošću na web stranicama.
• WAVE (Web Accessibility Evaluation Tool): Online alat koji procjenjuje web stranice na greške u pristupačnosti.
• axe DevTools: Proširenje za preglednik koje provodi automatizirano testiranje pristupačnosti.
• Čitači zaslona (NVDA, JAWS, VoiceOver): Testiranje s čitačima zaslona ključno je za identificiranje problema s pristupačnošću koji možda nisu vidljivi kroz automatizirano testiranje.

Zaključak

Pristupačne oznake obrazaca ključne su za stvaranje inkluzivnih web iskustava. Slijedeći najbolje prakse navedene u ovom vodiču, možete osigurati da su vaši obrasci upotrebljivi za sve, bez obzira na njihove sposobnosti. Davanje prioriteta pristupačnosti ne koristi samo korisnicima s invaliditetom, već poboljšava i cjelokupnu upotrebljivost vaše web stranice za sve korisnike. Ne zaboravite dosljedno testirati svoje obrasce s pomoćnim tehnologijama i uključiti korisnike s invaliditetom u proces testiranja kako biste dobili vrijedne povratne informacije i kontinuirano poboljšavali pristupačnost svoje web stranice.

Prihvaćanje pristupačnosti nije samo pitanje usklađenosti; radi se o stvaranju inkluzivnijeg i pravednijeg weba za sve. Ulaganjem u pristupačan dizajn obrazaca, pokazujete predanost inkluzivnosti i stvarate bolje korisničko iskustvo za sve.